<template>
  <div class="app-container">
      学生实训信息审核
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入姓名"
      prefix-icon="el-icon-search" clearable v-model="param.searchName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectBinding"></el-button>
      </el-col>
    </el-row>
    <el-row>
    <el-table :data="teacheList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="学号" width="80">
        <template slot-scope="scope">
          {{ scope.row.studentAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="220">
        <template slot-scope="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="目前实习实训单位">
        <template slot-scope="scope">
          {{ scope.row.internshipName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="导师">
        <template slot-scope="scope">
          {{ scope.row.teachName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="导师电话">
        <template slot-scope="scope">
          {{ scope.row.teachPhone }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="校外导师电话">
        <template slot-scope="scope">
          {{ scope.row.tutor }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="校外导师电话">
        <template slot-scope="scope">
          {{ scope.row.tutorPhone }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="detail(scope.row)">详情</el-button>
          <el-popconfirm title="确定通过此学生提交的实训信息吗？" @onConfirm="passStudentCompany(scope.row)" >
                <el-button type="primary"  slot="reference" >审核通过</el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
    <el-pagination background layout="prev, pager, next"  prev-text="上一页"
                  next-text="下一页"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currpage"
                  :page-size="pageSize"
                  :total="total">
     </el-pagination>
     <el-dialog title="实训信息详情" :visible.sync="CompanyDisabled">
          <el-form :model="studentCompany">
            <el-form-item label="实训单位名称" :label-width="formLabelWidth">
              <el-input v-model="studentCompany.internshipName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训单位类型" :label-width="formLabelWidth">
                  <el-select v-model="internshipType" placeholder="实训单位类型" :disabled="true">
                    <el-option label="校内培训" value="0"></el-option>
                    <el-option label="校外培训" value="1"></el-option>
                    <el-option label="校外实习" value="2"></el-option>
                  </el-select>
                </el-form-item>
               </el-col>
              <el-col :span="10">
                <el-form-item label="实训单位地址" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.internshipAddress" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
               </el-col>
            </el-row>
            <el-form-item label="实训描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="studentCompany.content" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.tutor" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                  <el-input v-model="studentCompany.tutorPhone" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实习协议" :label-width="formLabelWidth">
                    <img v-if="studentCompany.contract" :src="studentCompany.contract" class="avatar">
                </el-form-item>
              </el-col>
              <el-col :span="10">
                 <el-form-item label="实习照片" :label-width="formLabelWidth">
                    <img v-if="studentCompany.photo" :src="studentCompany.photo" class="avatar">
                 </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="CompanyDisabled = false">取 消</el-button>
            <el-popconfirm title="确定驳回此学生提交的实训信息吗？" @onConfirm="rejectStudentCompany()" >
                <el-button type="danger" slot="reference">驳回</el-button>
            </el-popconfirm>
            <el-popconfirm title="确定通过此学生提交的实训信息吗？" @onConfirm="detailPassStudentCompany()" >
                <el-button type="primary"  slot="reference" >审核通过</el-button>
            </el-popconfirm>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import {selectBinding,exportBinding,getStudentCompany,passStudentCompany,rejectStudentCompany} from '@/api/binding'
import { passCompny } from '@/api/company'


export default {
  data() {
    return {
     teacheList:[],
      param :{
      internshipStatus:0,
      start: 0,
      limit: 10,
      searchName:''
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      CompanyDisabled:false,
      studentCompany:{},
      passParams:{
          siId:''
      }
    }
  },
  //页面打开时执行的方法
  created() {
    this.selectBinding()
  },
  computed:{
      internshipType:function (){
      if(this.studentCompany.internshipType===0){
        return '校内合作实训单位'
      }else if(this.studentCompany.internshipType===1){
        return '校外合作实训单位'
      }else if(this.studentCompany.internshipType===2){
        return '非合作实训单位'
      }else{
        return '未定义'
      }
      }
  },
  methods: {
    async selectBinding() {
      let res = await selectBinding(this.param)
      this.teacheList = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.selectBinding();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.selectBinding();
    },
    selectUser(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.selectBinding()
    },
    async exportBinding() {
      await exportBinding(this.param)
    },
    async detail(row) {
        this.CompanyDisabled = true
        this.passParams.siId = row.siId
        let res = await getStudentCompany(row);
        this.studentCompany = res.bean
    },
    async passStudentCompany(row) {
        this.passParams.siId = row.siId
        this.detailPassStudentCompany()
    },
     async detailPassStudentCompany() {
        let res = await passStudentCompany(this.passParams).then(()=>{
            this.$message({
              type: 'success',
              message: '审核通过成功!'
            })
            this.CompanyDisabled = false
            this.selectBinding()
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
            })
    },
     async rejectStudentCompany() {
        let res = await rejectStudentCompany(this.passParams).then(()=>{
            this.$message({
              type: 'success',
              message: '驳回实训信息成功!'
            })
             this.CompanyDisabled = false
             this.selectBinding()
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
            })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
 .avatar {
    width: 200px;
    height: 150px;
    display: block;
  }
</style>
